<template>
  <div>
    <div>【关键词条】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineProps, onMounted, watch } from "vue";
import * as echarts from "echarts";
import type { EChartsOption, BarSeriesOption, EChartsType } from "echarts"; // 导入类型
import type { WordCloudDatas, WordCloudData } from "@/api/types";
import "echarts-wordcloud";
const props = defineProps<{
  data: WordCloudDatas;
}>();
console.log("关键词条", props.data);

//1. 根据DOM 实例，通过echarts.init方法，生成echarts实例
const target = ref<HTMLElement | null>(null);
let mChart: EChartsType;
onMounted(() => {
  mChart = echarts.init(target.value as HTMLElement);
  renderChart();
});

//2. 构建 options 配置对象，整个 echarts 的样式，皆有该对象决定
const randomRGB = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
};
const renderChart = () => {
  if (props.data.datas.length === 0) return;
  const options: EChartsOption = {
    series: [
      {
        type: "wordCloud",
        sizeRange: [8, 46],
        rotationRange: [0, 0],
        gridSize: 0,
        layoutAnimation: true,
        textStyle: {
          color: randomRGB,
        },
        // 高亮字体
        emphasis: {
          textStyle: {
            fontWeight: "bold",
            color: "#000",
          },
        },
        data: props.data.datas,
      },
    ],
  };
  //3 .最后通过 实例.set0ption 方法，设置配置对象
  mChart.setOption(options);
};

watch(() => props.data, renderChart);
</script>
<style scoped lang="scss"></style>
